<template>
  <div 
    class="relative rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl"
    :class="[
      'coupon-card',
      cardGradientClass,
      {
        'opacity-50 grayscale': !isAvailable,
        'ring-2 ring-white ring-opacity-60': isSelected,
        'cursor-pointer': isAvailable && showAction
      }
    ]"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 opacity-5">
      <div class="absolute top-0 right-0 w-20 h-20 bg-white rounded-full -translate-y-10 translate-x-10"></div>
      <div class="absolute bottom-0 left-0 w-16 h-16 bg-white rounded-full translate-y-8 -translate-x-8"></div>
    </div>
    
    <!-- 优惠券锯齿边效果 -->
    <div class="absolute right-0 top-0 bottom-0 w-6 overflow-hidden">
      <div class="absolute right-0 top-0 bottom-0 w-12 bg-white transform rotate-12 origin-left opacity-95"></div>
    </div>
    
    <!-- 优惠券内容 -->
    <div class="relative z-10 p-5 text-white">
      <!-- 顶部状态栏 -->
      <div class="flex items-center justify-between mb-4">
        <div v-if="status" class="px-3 py-1 rounded-full text-xs font-bold backdrop-blur-sm"
             :class="statusClass">
          {{ statusText }}
        </div>
        <div v-if="expireAt" class="text-xs font-medium opacity-90">
          {{ formatExpireTime(expireAt) }}
        </div>
      </div>
      
      <!-- 主要内容 -->
      <div class="flex items-start justify-between">
        <div class="flex-1">
          <!-- 优惠金额 -->
          <div class="flex items-baseline gap-2 mb-3">
            <div class="text-3xl font-black tracking-tight drop-shadow-lg">
              {{ discountText }}
            </div>
            <div v-if="coupon.type === 'percent'" class="text-lg font-bold opacity-90 drop-shadow-md">
              折
            </div>
          </div>
          
          <!-- 优惠券名称 -->
          <div class="text-sm font-bold mb-2 opacity-95 drop-shadow-md">
            {{ coupon.name }}
          </div>
          
          <!-- 使用条件 -->
          <div class="text-xs font-medium opacity-90 mb-3">
            {{ conditionText }}
          </div>
          
          <!-- 使用说明（仅显示额外说明，不重复条件） -->
          <div v-if="coupon.usage_note && coupon.usage_note !== conditionText" class="text-xs opacity-80 leading-relaxed">
            {{ coupon.usage_note }}
          </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="ml-4 flex-shrink-0 w-24 relative">
          <!-- 操作按钮 -->
          <div v-if="showAction" class="mb-3">
            <button 
              v-if="actionType === 'receive'"
              @click="handleReceive"
              :disabled="!canReceive"
              class="w-full px-3 py-2 bg-white text-gray-900 rounded-lg text-xs font-bold transition-all duration-200 hover:bg-gray-50 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
            >
              {{ receiveButtonText }}
            </button>
            
            <button 
              v-else-if="actionType === 'select'"
              @click="handleSelect"
              :disabled="!isAvailable"
              class="w-full px-3 py-2 bg-white text-gray-900 rounded-lg text-xs font-bold transition-all duration-200 hover:bg-gray-50 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
            >
              {{ isSelected ? '已选择' : '选择' }}
            </button>
            
            <button 
              v-else-if="actionType === 'use'"
              @click="handleUse"
              :disabled="!isAvailable"
              class="w-full px-3 py-2 bg-white text-gray-900 rounded-lg text-xs font-bold transition-all duration-200 hover:bg-gray-50 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
            >
              去使用
            </button>
          </div>
          
          <!-- 装饰性图案区域 -->
          <div class="absolute inset-0 top-12 pointer-events-none">
            <!-- 渐变背景 -->
            <div class="w-full h-full bg-gradient-to-br from-white/10 via-white/5 to-transparent rounded-lg"></div>
            
            <!-- 几何图案 -->
            <div class="absolute top-2 right-2 w-8 h-8 border-2 border-white/20 rounded-full"></div>
            <div class="absolute top-6 right-4 w-4 h-4 bg-white/15 rounded-full"></div>
            <div class="absolute top-10 right-2 w-6 h-6 border border-white/20 transform rotate-45"></div>
            
            <!-- 条纹图案 -->
            <div class="absolute top-16 left-2 right-2 h-0.5 bg-white/20"></div>
            <div class="absolute top-20 left-2 right-2 h-0.5 bg-white/15"></div>
            <div class="absolute top-24 left-2 right-2 h-0.5 bg-white/10"></div>
            
            <!-- 点状图案 -->
            <div class="absolute top-28 left-3 w-1 h-1 bg-white/20 rounded-full"></div>
            <div class="absolute top-30 left-6 w-1 h-1 bg-white/15 rounded-full"></div>
            <div class="absolute top-32 left-9 w-1 h-1 bg-white/10 rounded-full"></div>
            
            <!-- 波浪图案 -->
            <div class="absolute bottom-4 left-2 right-2 h-2 overflow-hidden">
              <div class="w-full h-full bg-gradient-to-r from-transparent via-white/10 to-transparent transform -skew-x-12"></div>
            </div>
          </div>
          
          <!-- 使用限制 -->
          <div v-if="coupon.usage_limit_per_user > 0" class="mt-2 text-center relative z-10">
            <div class="text-xs opacity-70">每人限用</div>
            <div class="text-xs font-bold">{{ coupon.usage_limit_per_user }}次</div>
          </div>
          
          <!-- 有效期显示 -->
          <div v-if="expireAt" class="mt-2 text-center relative z-10">
            <div class="text-xs opacity-70">有效期至</div>
            <div class="text-xs font-medium">{{ formatDate(expireAt) }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 不可用遮罩 -->
    <div v-if="!isAvailable && reason" class="absolute inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-center justify-center">
      <div class="text-white text-xs text-center px-4 font-medium">
        {{ reason }}
      </div>
    </div>
    
    <!-- 光效装饰 -->
    <div class="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-white to-transparent opacity-30"></div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'

const props = defineProps({
  coupon: {
    type: Object,
    required: true
  },
  userCoupon: {
    type: Object,
    default: null
  },
  status: {
    type: String,
    default: null // 'unused', 'used', 'expired'
  },
  actionType: {
    type: String,
    default: 'receive' // 'receive', 'select', 'use'
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  canReceive: {
    type: Boolean,
    default: true
  },
  reason: {
    type: String,
    default: ''
  },
  showAction: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['receive', 'select', 'use'])

// 计算卡片渐变样式
const cardGradientClass = computed(() => {
  switch (props.coupon.type) {
    case 'fixed':
      return 'bg-gradient-to-br from-amber-400 via-orange-500 to-red-500'
    case 'percent':
      return 'bg-gradient-to-br from-cyan-400 via-blue-500 to-indigo-600'
    case 'shipping':
      return 'bg-gradient-to-br from-emerald-400 via-green-500 to-teal-600'
    case 'full_reduction':
      return 'bg-gradient-to-br from-rose-400 via-pink-500 to-purple-600'
    default:
      return 'bg-gradient-to-br from-slate-400 via-gray-500 to-zinc-600'
  }
})

// 计算优惠文本
const discountText = computed(() => {
  switch (props.coupon.type) {
    case 'fixed':
    case 'full_reduction':
      return `¥${props.coupon.value}`
    case 'percent':
      // 格式化百分比显示，去掉不必要的小数点
      const value = parseFloat(props.coupon.value)
      return value % 1 === 0 ? value.toString() : value.toFixed(1)
    case 'shipping':
      return '免运费'
    default:
      return ''
  }
})

// 计算使用条件文本
const conditionText = computed(() => {
  if (props.coupon.min_purchase > 0) {
    return `满¥${props.coupon.min_purchase}可用`
  }
  if (props.coupon.type === 'shipping') {
    return '无门槛免运费'
  }
  return '无门槛使用'
})

// 计算状态样式
const statusClass = computed(() => {
  switch (props.status) {
    case 'unused':
      return 'bg-white/30 text-white backdrop-blur-md border border-white/20'
    case 'used':
      return 'bg-gray-500/30 text-white backdrop-blur-md border border-gray-400/20'
    case 'expired':
      return 'bg-red-500/30 text-white backdrop-blur-md border border-red-400/20'
    default:
      return 'bg-white/30 text-white backdrop-blur-md border border-white/20'
  }
})

// 计算状态文本
const statusText = computed(() => {
  switch (props.status) {
    case 'unused':
      return '未使用'
    case 'used':
      return '已使用'
    case 'expired':
      return '已过期'
    default:
      return ''
  }
})

// 计算是否可用
const isAvailable = computed(() => {
  if (props.status === 'used' || props.status === 'expired') {
    return false
  }
  return props.canReceive && !props.reason
})

// 计算领取按钮文本
const receiveButtonText = computed(() => {
  if (!props.canReceive) {
    return '不可领取'
  }
  if (props.userCoupon) {
    return '已领取'
  }
  return '立即领取'
})

// 计算过期时间
const expireAt = computed(() => {
  if (props.userCoupon?.expire_at) {
    return props.userCoupon.expire_at
  }
  if (props.coupon.end_time) {
    return props.coupon.end_time
  }
  return null
})

// 格式化过期时间
const formatExpireTime = (date) => {
  if (!date) return ''
  
  const expireDate = new Date(date)
  const now = new Date()
  
  if (expireDate <= now) {
    return '已过期'
  }
  
  const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24))
  
  if (diffDays === 1) {
    return '明天过期'
  } else if (diffDays <= 7) {
    return `${diffDays}天后过期`
  } else {
    return expireDate.toLocaleDateString('zh-CN')
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit'
  })
}

// 处理领取
const handleReceive = () => {
  if (props.canReceive && !props.userCoupon) {
    emit('receive', props.coupon.id)
  }
}

// 处理选择
const handleSelect = () => {
  if (props.isAvailable) {
    emit('select', props.userCoupon?.id || props.coupon.id)
  }
}

// 处理使用
const handleUse = () => {
  if (props.isAvailable) {
    emit('use', props.userCoupon?.id || props.coupon.id)
  }
}
</script>

<style scoped>
.coupon-card {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  background: linear-gradient(135deg, var(--tw-gradient-stops));
}

.coupon-card::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.6) 3px,
    rgba(255, 255, 255, 0.6) 6px
  );
  z-index: 1;
}

.coupon-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.6) 3px,
    rgba(255, 255, 255, 0.6) 6px
  );
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .coupon-card {
    min-height: 120px;
    padding: 1rem;
  }
  
  .coupon-card .text-3xl {
    font-size: 2rem;
  }
  
  .coupon-card .text-lg {
    font-size: 1rem;
  }
}

/* 悬停效果增强 */
.coupon-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
}

/* 按钮悬停效果 */
.coupon-card button:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 选择状态动画 */
.coupon-card.ring-2 {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  }
  to {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(255, 255, 255, 0.3);
  }
}

/* 光效动画 */
.coupon-card::before {
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

/* 文字阴影效果 */
.coupon-card .text-3xl {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.coupon-card .text-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 渐变文字效果 */
.coupon-card .text-3xl {
  background: linear-gradient(45deg, #ffffff, #f0f0f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>
